<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";

//设置token
mapboxgl.accessToken =
  "xxxxx";

onMounted(() => {
  const map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    //指定加载地图的样式，这里为官方提供的底图 
    style: "mapbox://styles/mapbox/streets-v12",
    //指定默认视图中心点的经纬度
    center: [106.55, 29.57],
    //指定默认视图的放大层级
    zoom: 9,
  });
});
</script>

<template>
  <div id="map" class="map"></div>
</template>

<style>
.map {
  width: 800px;
  height: 600px;
}
</style>
